<template>
    <div>
        <template v-for="item in typeData" :key="item._id">
            <span v-if="currentId == item._id" class="type-item active">{{ item.name }}</span>
            <span v-else class="type-item" @click="currentId = item._id"> {{ item.name }} </span>
        </template>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
// 表示当前选中的分类id
const currentId = ref('');

const typeData = reactive([
    {
        _id: '',
        name: '全部'
    },
    {
        "_id": "66383656659a454f4604aed3",
        "name": "喜剧"
    },
    {
        "_id": "66383669659a454f4604aed4",
        "name": "爱情"
    },
    {
        "_id": "6638366f659a454f4604aed5",
        "name": "动作"
    },
    {
        "_id": "66383673659a454f4604aed6",
        "name": "科幻"
    },
    {
        "_id": "6638367b659a454f4604aed7",
        "name": "动画"
    },
    {
        "_id": "66383681659a454f4604aed8",
        "name": "悬疑"
    },
    {
        "_id": "66383689659a454f4604aed9",
        "name": "犯罪"
    },
    {
        "_id": "6638368c659a454f4604aeda",
        "name": "惊悚"
    },
    {
        "_id": "66383692659a454f4604aedb",
        "name": "冒险"
    },
    {
        "_id": "66383696659a454f4604aedc",
        "name": "音乐"
    },
    {
        "_id": "6638369a659a454f4604aedd",
        "name": "历史"
    },
    {
        "_id": "6638369e659a454f4604aede",
        "name": "奇幻"
    },
    {
        "_id": "663836a1659a454f4604aedf",
        "name": "恐怖"
    },
    {
        "_id": "663836a8659a454f4604aee0",
        "name": "战争"
    },
    {
        "_id": "663836b0659a454f4604aee1",
        "name": "传记"
    },
    {
        "_id": "663836b4659a454f4604aee2",
        "name": "歌舞"
    },
    {
        "_id": "663836b9659a454f4604aee3",
        "name": "武侠"
    },
    {
        "_id": "663836c2659a454f4604aee4",
        "name": "灾难"
    },
    {
        "_id": "663836cb659a454f4604aee5",
        "name": "纪录片"
    },
    {
        "_id": "682f32c447bd398e5f05fd14",
        "name": "剧情"
    },
    {
        "_id": "682fe58247bd398e5f05fd20",
        "name": "家庭"
    }
])

</script>

<style scoped>
.type-item {
    display: inline-block;
    padding: 3px 10px;
    margin: 5px;
}

.active {
    background-color: brown;
    color: #fff;
}
</style>